<template>
  <el-dialog 
    title="修改用户信息" 
    :visible.sync="dialogVisible" 
    width="50%"
    @close="dialogUpdateClose"
    :close-on-click-modal="false">

    <!-- form表单 -->
    <el-form
      :model="dialogData"
      :rules="rules"
      ref="dialogFormRef"
      label-width="100px">

      <!-- 用户名 -->
      <el-form-item label="用户名" prop="username">
        <el-input v-model="dialogData.username" disabled></el-input>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dialogData.email"></el-input>
      </el-form-item>

      <!-- 手机 -->
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="dialogData.mobile"></el-input>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogUpdateCheck">确 定</el-button>
    </span>

  </el-dialog>
</template>

<script>
// 网络请求
import { getUserInfo, putUserInfo } from '@/network/homeRequest';

export default {
  data() {
    return {
      dialogVisible: false, // Dialog组件是否显示
      dialogData: {},
      rules: { // 表单校验规则
        email: [ // 邮箱规则
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        mobile: [ // 自定义电话规则
          { required: true, trigger: 'blur', validator: this.validPhone }
        ]
      }
    }
  },
   created() {
    this.$bus.$on('openDialogUpdate', (id) => { // 初始化打开Dialog组件事件
      this.getUserInfobyId(id);
      this.dialogVisible = true; // 点击按钮开启Dialog组件
    })
  },
  destroyed() {
    this.$bus.$off('openDialogUpdate') // 注销事件
  },
  methods: {
    async getUserInfobyId(id) {
      const {data, meta} = await getUserInfo(id);
      // console.log(data, meta);
      if (meta.status !== 200) { // 异常
        return this.$message({
            showClose: true,
            message: meta.msg,
            type: 'error'
          });
      }
      return this.dialogData = data; // 将用户信息保存
    },
    dialogUpdateClose() { // 修改信息dialog组件关闭触发函数
      this.$refs['dialogFormRef'].resetFields(); // 重置
    },
    async dialogUpdateCheck() { // 进行表单预验证操作   及   网络请求提交修改数据
      this.$refs['dialogFormRef'].validate(val => {
        if (!val) {
           return this.$message({
            showClose: true,
            message: '请将所有内容填充完毕!',
            type: 'warning'
          });
        }
      })

      // 验证都通过 发送网络请求
      const {email, mobile} = this.dialogData;
      const { meta } = await putUserInfo(this.dialogData.id, {email, mobile});
      // console.log(meta, data);
      if (meta.status !== 200) { // 提交有误
        return this.$message({
            showClose: true,
            message: meta.msg,
            type: 'error'
          });
      }
      this.dialogVisible = false; // 关闭dialog组件
      this.$message({ // 成功提示
            showClose: true,
            message: meta.msg,
            type: 'success'
          });
      return this.$bus.$emit('getUserList'); // 获取最新数据
    }
  }
}
</script>

<style lang="scss" scoped>

</style>